<template>
  <div id="content">

    <div class="header">
      <van-image
        round
        width="10rem"
        height="10rem"
        :src='require("@/assets/logo.png")'
      />
      <h4>欢迎来到STORE LIVE</h4>
    </div>
    <div class="input-box">
      <div>
        <input
          type="text"
          name="username"
          v-model="username"
          placeholder="请输入用户名"
        />
      </div>
      <div>
        <input
          type="password"
          name="password"
          v-model="password"
          placeholder="请输入密码"
        />
      </div>
      <div style="height: 20px"></div>
      <van-button
        round
        type="info"
        size="large"
        color="rgb(24, 154, 100)"
        @click="login"
        class="button-box"
        >登录</van-button
      >
      <router-link to="/register">
        <p>注册</p>
      </router-link>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { Toast } from "vant";


export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    login() {
      axios
        .post("/api/login.php", {
          username: this.username,
          password: this.password,
        })
        .then((response) => {
          Toast.success("登陆成功");
          localStorage.setItem("username", this.username);
          this.$router.push("/home");
          
        });
    },
  },
};
</script>
<style scoped>
body {
}
.header {
  margin: 20% auto;
  text-align: center;
}
#content {
  padding: 10px;
}
#content input {
  width: 90%;
  padding: 10px;
  background: #ffffff;
  border: none;
  border-bottom: 1px solid #e2f0e9;
}
.input-box {
  width: 80%;
  margin: 5% auto;
}
.input-box p{
  text-align: center;
}

</style>